<style scoped>
  .clientNoReplenishment {
    margin-right: 0.5vw;
    padding: 0 15px;
    background-color: white;
    height: 95vh;
    position: relative;
  }
  .cr_top{
    display: flex;
    padding: 1.5vh 0;
    border-bottom: 1vh solid #f4f4f4;
  }
  .cr_top>p:first-child{
    margin: 3px 6px 0 0;
  }
  .cr_top>p:not(:first-child){
    margin: 3px 6px 0 12px;
  }
  .txt{
    display: flex;
    padding: 4px 10px;
    background: #f4f4f4;
    border-radius: 15px;
    font-size: 15px;
  }
  .txt>i{
    color: #017fff;
    margin: 4px 6px 0 0;
  }
  .c_tabel{
    display: flex;
    height: 90%;
    background: #f4f4f4;
  }
  .c_tabel1{
    width: 49%;
    height: 100%;
    margin-right: 1%;
    background: white;
    /* border: 1px solid black; */
  }
  .c_tabel2{
    width: 50%;
    height: 100%;
    padding-top: 10px;
    background: white;
    /* border: 1px solid black; */
  }
  .c_tabel1 div:first-child{
    margin: 10px 0 20px 0;
  }
</style>

<style>
  .clientNoReplenishment .el-input__icon{
    line-height: 30px;
  }
  .clientNoReplenishment .cr_top .el-input__inner{
    height: 30px;
  }
  .clientNoReplenishment .cr_top .el-input{
    width: 160px;
  }
</style>

<template>
  <div class="clientNoReplenishment">
    <div class="cr_top">
      <p>品牌</p>
      <el-select v-model="brandedName">
        <el-option v-for="item in brandList" :key="item.value" :label="item.label" :value="item.value"></el-option>
      </el-select>
      <p>最近天数</p>
      <el-input v-model="days" @keyup.enter.native="search"></el-input>
      <p>公司库存</p>
      <el-input v-model="inventory"></el-input>
      <div class="txt" style="margin-left:30px" v-show="showConclusion">
        <i class="el-icon-question"></i>
        <p>{{date}}后销售未补 合计，共有{{customerNum}}个客户，件数：{{sum}}，金额：{{money}}.</p>
      </div>
      <div class="txt" style="margin-left:50px">
        <i class="el-icon-question"></i>
        <p>操作说明：</p>
        <p>输入天数，按回车，系统即将查询</p>
      </div>
    </div>
    <div class="c_tabel">
      <div class="c_tabel1">
        <div>
          <el-table :data="tableData1" height="38vh" :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px'}" :cell-style="{padding:0,height:'36px'}" style="width: 100%;padding-right:5px" @row-click="rowClick1">
            <el-table-column prop="customerNo" label="客户编号"></el-table-column>
            <el-table-column prop="customerName" label="客户简称"></el-table-column>
            <el-table-column prop="sellNum" label="销售数"></el-table-column>
            <el-table-column prop="sellMoney" label="销售额"></el-table-column>
            <el-table-column prop="customerRepertory" label="客存"></el-table-column>
          </el-table>
        </div>
        <div style="border-top:1vh solid #f4f4f4">
          <div style="margin:0;padding:1vh 0;background:white;">
            <el-button @click="exp('客户销售未补')" icon="el-icon-upload2">所有导出</el-button>
            <el-button @click="exportOne" icon="el-icon-upload2">单个导出</el-button></div>
          <el-table 
            :data="tableData2" 
            id="outTable" 
            height="38vh" 
            highlight-current-row 
            :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px'}" 
            :cell-style="{padding:0,height:'36px'}" 
            style="width: 100%;padding-right:5px" 
            @row-click="rowClick2">
            <el-table-column prop="kindsNumber" label="货号" width="180"></el-table-column>
            <el-table-column prop="sellNum" label="销售数" width="80"></el-table-column>
            <el-table-column prop="sellMoney" label="销售额" width="100"></el-table-column>
            <el-table-column prop="repertory" label="库存" width="100"></el-table-column>
            <el-table-column prop="customerRepertory" label="客存" width="100"></el-table-column>
            <el-table-column prop="maxSellTime" label="客户销货日期" width="110"></el-table-column>
            <el-table-column prop="styleNumber" label="款号"></el-table-column>
          </el-table>
        </div>
      </div>
      <div class="c_tabel2">
        <el-table :data="tableData3" height="84.3vh" :header-cell-style="{background:'#f4f4f4',padding:0,height:'40px'}" :cell-style="{padding:0,height:'36px'}" style="width: 100%;padding-left:5px">
          <el-table-column prop="customer" label="客户"></el-table-column>
          <el-table-column prop="kindsNumber" label="货号" width="160"></el-table-column>
          <el-table-column prop="customerRepertory" label="客存" width="60"></el-table-column>
          <el-table-column prop="customerInput" label="进" width="60"></el-table-column>
          <el-table-column prop="customerOut" label="退" width="60"></el-table-column>
          <el-table-column prop="customerSell" label="销" width="60"></el-table-column>
          <el-table-column prop="minInputTime" label="首进日" width="110"></el-table-column>
          <el-table-column prop="maxOutTime" label="近退日" width="110"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { getBranded } from '../../../network/branded'
import { getSellNotMadeUp } from '../../../network/customerQuery'

import today from '../../../components/mixins/today'
import outex from '../../../components/mixins/outexp'
import enterUp from '../../../components/mixins/enterUp'

import table2excel from 'js-table2excel'
import XLSX from "xlsx"

export default {
  name: 'client_no_replenishment',
  mixins: [today,outex,enterUp],
  data(){
    return{
      inpList: [],
      showConclusion: false,
      date: '',
      customerNum: 0,
      sum: 0,
      money: 0,

      brandedName: '',
      brandList: [],
      days: '',
      inventory: '',
      tableData1:[],
      tableData2:[],
      tableData3:[],

      info: {},
      info: [],
      oneData: {}
    }
  },
  created(){
    this.inpList = this.getInput()
    // 获取品牌
    getBranded({limit: 99999}).then(res => {
      if (res.data.code != 200) return
      res.data.data.forEach(e => {
        this.brandList.push({value:e.name,label:e.name})
      })
    })
  },
  methods: {
    search(){
      if (this.days == '') return
      this.oneData = {}
      getSellNotMadeUp({
        brandedName: this.brandedName,
        day: this.days
      }).then(res => {
        this.tableData2 = []
        this.tableData3 = []
        if (res.data.code == 200) {
          this.date = this.searchDate(this.days)
          this.customerNum = res.data.data.totalList.length
          this.sum = 0
          this.money = 0
          res.data.data.totalList.forEach(e => {
            this.sum += e.sellNum
            this.money += e.sellMoney
          })
          this.tableData1 = res.data.data.totalList
          this.info1 = res.data.data.info1
          this.info2 = res.data.data.info2

          this.showConclusion = true
        }
      })
    },

    rowClick1(row){
      this.tableData2 = []
      for (const key in this.info1) {
        if (this.info1.hasOwnProperty(key)) {
          const element = this.info1[key]
          if (key == row.customerNo) {
            this.tableData2 = element
            this.tableData2.forEach(e => {
              e.maxSellTime = e.maxSellTime.slice(0,10)
            })
            return
          }
        }
      }
    },
    rowClick2(row){
      this.tableData3 = []
      for (const key in this.info2) {
        if (this.info2.hasOwnProperty(key)) {
          const element = this.info2[key]
          if (key == row.kindsNumber) {
            this.tableData3 = element
            this.tableData3.forEach(e => {
              if (e.minInputTime) e.minInputTime = e.minInputTime.slice(0,10)
              if (e.maxOutTime) e.maxOutTime = e.maxOutTime.slice(0,10)
              e.customer = e.customerNo + '.' + e.customerName
            })
            return
          }
        }
      }
      this.oneData = row
    },
    exportOne(){
      if (JSON.stringify(this.oneData) == '{}') {
        this.$message.info("未选择数据")
        return
      }
      // this.oneData.kindsNumber += '&nbsp;'
      // this.oneData.styleNumber += '&nbsp;'
      let column = [
        {
          key: 'kindsNumber',
          title: '货号',
          type: 'text'
        },{
          key: 'sellNum',
          title: '销售数',
          type: 'text'
        },{
          key: 'sellMoney',
          title: '销售额',
          type: 'text'
        },{
          key: 'repertory',
          title: '库存',
          type: 'text'
        },{
          key: 'customerRepertory',
          title: '客存',
          type: 'text'
        },{
          key: 'maxSellTime',
          title: '客户销货日期',
          type: 'text'
        },{
          key: 'styleNumber',
          title: '款号',
          type: 'text'
        }
      ]
      table2excel(column, [this.oneData], "客户销售未补.xls")
    }
  }
}
</script>>